SPAN CLASSES 

Use these classes to set the 
width of a column 



.span-1 


.span-13 


.span-2 


.span-14 


.span-3 


.span-15 


.span-4 


.span-16 


.span-5 


.span-17 


.span-6 


.span-18 


.span-7 


.span-19 


.span-8 


.span-20 


.span-9 


.span-21 


.span-10 


.span-22 


.span-11 


.span-23 


.span-12 


.span-24 




APPEND CLASSES 


Add these to a column to add 
empty columns to the right. 


.append-1 


.append-13 


.append-2 


.append-14 


.append-3 


.append-15 


.append-4 


.append-16 


.append-5 


.append-17 


.append-6 


.append-18 


.append-7 


.append-19 


.append-8 


.append-20 


.append-9 


.append-21 


.append-10 


.append-22 


.append-11 


.append-23 


.append-12 




BBS 


Add these to a column to add 
empty columns to the left. 


.prepend-1 


.prepend-13 


.prepend-2 


.prepend-14 


.prepend-3 


.prepend-15 


.prepend-4 


.prepend-16 


.prepend-5 


.prepend-17 


.prepend-6 


.prepend-18 


.prepend-7 


.prepend-19 


.prepend-8 


.prepend-20 


.prepend-9 


.prepend-21 


.prepend-10 


.prepend-22 


.prepend-11 


.prepend-23 


.prepend-12 





VERTICAL CLASSES 

Use these classes on an 
element to add vertical space. 



.prepend-top mT 1.5em 
.append-bottom mB 1.5em 



PUSH/PULL CLASSES 

Use these classes on an 
element to push it right into 
the next column, or pull it left 
into the previous column. 



.push-1 to .push-24 
.pull-1 to .pull-24 
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STYLESHEET LINK 



Download the latest version from www.blueprintcss.org and add these lines into the <head> of your 
page. Check that your href path is correct. 

<link rel=" stylesheet " href ="blueprint/ screen . ess " type="text/css " 

media=" screen, projection" /> 
<link rel=" stylesheet " href = "blueprint /print .ess" type=" text /ess" 

media= "print " /> 
<! — [if It IE 8]> 

<link rel=" stylesheet " href ="blueprint/ie . ess " type="text/css " 

media=" screen, projection" /> 
< ! [endif ] — > 



<body> 

<div class=" container" > 
<div class="span-16"> 
<p>Column l</p> 
</div> 

<div class="span-8 last"> 
<p>Column 2</p> 
</div> 
</div> 
</body> 

.span-x implies a column {although .column 
may still be used). Remember to use Mast" for 
the last column of the row to avoid it jumping to 
the next row. Columns may be nested inside 
one another. 



TYPOGRAPHY 



typography. css sets up some sensible default 
typography. The font-size percentage is of 16px 
(0.75 x 16px = 12px). Line-heights and vertical 
margins are automatically calculated from this in 
ems. 

The base line-height is 18px (1.5em). This means 
that each element, from line-heights to images 
has a height that is a multiple of 18 (or 1.5 if you 
use ems). (See page 2 for a table of values.) 

hl-h6 color is #111 (nearly black); body color is 
#222 (dark grey); font-family is "Helvetica Neue", 
"Helvetica", "'Aria I " , sans-serif. 



Defined in grid. css. Each column is 30px wide with a lOpx right margin (except the last column which 
has no margin). If you need more or fewer columns use this formula to find the new total width: 
total width = (columns x 40px) - lOpx. (See page two for full grid diagram.) 
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870px 
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910px (23 columns) 



















950px (24 columns) 



GRID CLASSES 


.append-x 


Add these to a column to add empty columns to the right; x = 1 to 23. 


.append-bottom 


Add a 1.5em gutter below an element. 


.border 


Shows a border (#ddd mid-grey) on the right hand side of a column. 


.box 


Creates a blue padded box inside a column (padding and margin-bottom: 1.5em). 


.clear 


Regular clearing: apply to a column that should drop below previous ones. 


.clearfix 


Clearing floats without extra mark-up. (See http://tinyurl.com/dh352) 


.colborder 


Spans one column with a border in the centre. (#ddd mid-grey) 


.column 


Use with .span-x classes to create combinations of columns in the layout. 


.container 


Group your columns within containers; use on <div>. (width: 950px; margin: 0;) 


.even 


Table-striping for older browsers that don't support 'tbody tr:nth-child(even) td'. 


.last 


The last column in a row needs this class. 


.prepend-x 


Add these to a column to add empty columns to the left; x = 1 to 23. 


.prepend-top 


Add a 1.5em gutter above an element. 


.pull-x 


Use these classes on an element to pull it left into the previous column; x = 1 to 24. 


.push-x 


Use these classes on an element to push it right into the next column; x = 1 to 24. 


.showgrid 


Use this on any .span / .container to see 'grid.png' as a background image. 


hr. space 


Use this to create a transparent horizontal rule across a column; also use <hr />. 


. span-x 


Use these classes to set the width of a column; x = 1 to 24; usually used on a div 
element. Can also be used on input and textarea elements (uses different widths). 



Defined mostly in reset. css. 
Blueprint CSS resets all 
browsers' default elements 
including HTML5 to: 

• margin, padding, border: 0 

• font-size: 100.01% 

• font-weight: normal 

• line-height: 1.5 

• other font values: inherit 

• image borders: 0 

• Tocus outline: 0 

Note that tables will still need 
cellspacing="0" in the HTML 
mark-up though. 



TYPOGRAPHY CLASSES 

These classes are defined in 
the typography.css file. Other 
typographic elements are also 
defined in this file. 



.added 


bg #060 (green) 


.bottom 


mB 0; pB 0 


.first 


mLO; pLO 


.hide 


display: none 


.highlight 


bg #ffO (yellow) 


.large 


1.2em; line 2.5 


.last 


mR 0; pR 0 


.loud 


color #000 (black) 


.quiet 


color #666 (grey) 


.removed 


bg#900 (red) 


.small 


0.8em ; line 1.875 


.top 


mT 0; pT 0 




FLOAT CLASSES 


.left 


float: left 


.right 


float: right 


p .left/.right margin:1.5em 
1.5em 1.5em 0 




FORMS 


.alert 


red frame box 


.error 


red frame box 


.info 


blue frame box 


.notice 


yellow frame box 


.success 


green frame box 


fieldset 


p, m and border 


form. inline 


line-height 3 


input.text 


w 300px p 5px 


input.title 


font-size 1.5em 


input [type 


=text] 


input [type 


= password] 


label 


bold 


legend 


m, font 1.2em 


select 


border Ipx 


textarea 


w390px h250px 




IE FIXES 



IE ALL Alignment of inline 
forms; margin bugs; fieldset 
padding (inc. IE8); image 
resizing; sub/sup line-height. 

IE5 Centre layout. 

IE6 Legend, label, textarea. 

IE6 & IE7 ol numbers and hr 
margins. 

IE7 Code wrap. 
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GRID - each column is 30px wide with a lOpx right margin, except the last column which has no margin. 



clsss 


width 


.span-1 


30px 


.span-2 


70px 


.spa n-3 


1 lOpx 


spa n-4 


150px 


.spa n ~5 


190px 


c na n -F\ 
. 0 \JO i 1 u 


230 px 


.span 7 


270px 


. s pa n _ o 


310px 


cna n-Q 


JJU [Ja 




JJU[Ja 


cna n- 1 1 
. j |_"_] 11 11 


430px 


.o\Ja 1 1 ±c. 


470px 


c nq n- 1 "3 

. ■ J II 1 •_> 


510px 


spa n- 14 


550px 


spa n- 1 5 


590px 


.span-16 


ooupx 


.span-17 


670px 


.span-18 


710px 


.span-19 


750px 


.span-20 


790px 


.span-21 


830px 


.span-22 


870px 


.span-23 


910px 


.span-24 


950px 



LINE-HEIGHT 

The base line-height is 18px. 
Every element from images to 
line-height is a multiple of 18. 



1 


18px 


22 


396px 


2 


36px 


23 


414px 


3 


54px 


24 


432px 


4 


72px 


25 


450px 


5 


90px 


26 


468px 


6 


108px 


27 


486px 


7 


126px 


28 


504px 


8 


144px 


29 


522px 


9 


162px 


30 


540px 


10 


180px 


31 


558px 


11 


198px 


32 


576px 


12 


216px 


33 


594px 


13 


234px 


34 


612px 


14 


252px 


35 


630px 


15 


270px 


36 


648px 


16 


288px 


37 


666 px 


17 


306px 


38 


684 px 


18 


324px 


39 


702px 


19 


342px 


40 


720px 


20 


360px 


41 


738px 


21 


378px 


42 


756px 



10 



11 



12 



12 



24 columns 
12 columns 
8 columns 
6 columns (sixths) 

4 columns (quarters) 

3 columns (thirds) 



2 columns (half) 



13 



14 



15 



16 



17 



18 



19 



20 



two thirds 



three quarters 



five sixths 



21 



22 



23 



24 



1 column (full width) 



FILE STRUCTURE 



blueprint/screen. ess 

blueprint/print.css 

blueprint/ie.css 

blueprint/plugins/ 

blueprint/src/reset.css 

blueprint/src/grid.css 

blueprint/src/typography.css 

blueprint/src/forms.css 

blueprint/src/print.css 

blueprint/src/ie.css 

lib/compress, rb 

lib/validate/rb 



DOWNLOADS 



Latest ZIP 

http://github.com/ 

joshuaclayton/blueprint-css/ 

zipball/master 

Latest TGZ 

http://github.com/ 

joshuaclayton/blueprint-css/ 

tarball/master 

All versions 

http://github.com/ 

joshuaclayton/blueprint-css/ 

downloads 



TOOLS & RESOURCES 


Blueprint CSS home 


www.blueprintcss.org 


Articles 


http://wiki.github.com/joshuaclayton/blueprint-css/articles 


Browser compatibility list 


http://wiki.github.com/joshuaclayton/blueprint-css/browser- 
compatibility-list 


Bug tracker 


http://blueprintcss.lighthouseapp.com 


Cheat sheets and templates 


http://wiki.github.com/joshuaclayton/blueprint-css/tools-and-resources 


Code generators 


http://bluecalc.groupion.com or http://bgg.kematzy.com 


Demos 


www.blueprintcss.org/tests 


Discussion group 


http://groups.google.com/group/blueprintcss 


Facebook 


http://www.facebook.com/blueprintcss 


Github repository 


http://github.com/joshuacIayton/blueprint-css/tree/master 


JavaScript background grid 
switcher/toggler 


http://tomster.org/blog/archive/2008/04/26/blueprint-css-jquery/ 

http://www.sanityinc.com/articles/bookmarklet-to-toggle-blueprint-css- 

grid 


Layout editors 


http://constructyourcss.com or http://toki-woki.net/p/Boks 


License 


http://wiki.github.com/joshuaclayton/blueprint-css/license 


Mods, forks and alternatives 


http://wiki.github.com/joshuaclayton/blueprint-css/mods-forks-and- 
alternatives 


Paper grid (A4) 


http://blueprintcss.org/media/PaperGrid_by_KaiHowells.pdf 


Plugins 


http://wiki.github.com/joshuaclayton/blueprint-css/plugins 


Themes and frameworks 


http://wiki.github.com/joshuaclayton/blueprint-css/themes-and- 
frameworks 


Tutorials 


http://wiki.github.com/joshuaclayton/blueprint-css/tutorials 


Twitter 


http://twitter.com/blueprintcss 


Wiki 


http://github.com/joshuaclayton/blueprint-css/wikis/home 



